<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem>文章管理</BreadcrumbItem>
      <BreadcrumbItem>文章列表</BreadcrumbItem>
    </Breadcrumb>
    <Form ref="formInline" :model="request" inline>
      <FormItem>
        文章标题: <Input
        type="text"
        clearable
        placeholder="请输入文章标题"
        style="width: 120px"/>
      </FormItem>
      <FormItem>
        是否是第三方: <Select clearable  style="width: 120px;">
          <Option value="0">是</Option>
          <Option value="0">否</Option>
        </Select>
      </FormItem>
      <FormItem>
        是否置顶: <Select clearable  style="width: 120px;">
          <Option value="0">是</Option>
          <Option value="0">否</Option>
        </Select>
      </FormItem><br>
      <FormItem>
        是否发布: <Select clearable  style="width: 120px;">
          <Option value="0">是</Option>
          <Option value="0">否</Option>
        </Select>
      </FormItem>
      <FormItem>
        文章类型: <Select clearable  style="width: 120px;">
          <Option value="0">文艺类</Option>
          <Option value="0">散文类</Option>
        </Select>
      </FormItem>
      <FormItem>
        权重: <Input
        type="text"
        clearable
        placeholder="请输入权重"
        style="width: 120px"/>
      </FormItem>
      <FormItem>
        <Button type="primary"  style="margin-right: 10px">搜索</Button>
      </FormItem><br>
      <FormItem>
        <Button type="primary" @click="$router.push('/article/add')" style="margin-right: 10px">添加文章</Button>
      </FormItem>
    </Form>
    <div>
      <Table :columns="columns1" :data="tableData">
        <template slot-scope="{ row }" slot="option">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="$router.push('/article/edit')"
            v-hasPermission="['39']">编辑</Button>
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="goDel(row.order_id, row.id)"
            v-hasPermission="['39']">删除</Button>
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="goDel(row.order_id, row.id)"
            v-hasPermission="['39']">下架</Button>
        </template>
      </Table>
    </div>
    <!--    分页功能-->
    <div style="display: flex; justify-content: center;">
      <Page style="display: flex;justify-content: center;margin-top: 24px;" :total="page.count" :page-size="20" :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer show-total
            @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange" />
    </div>
  </div>


</template>

<script>
  export default {
    data() {
      return {
        params: {
          device_time: [],
          status: 1,
          user_id: "",
          order_id: "",
          activity_id: "",
          page: 1,
          limit: 10,
        },
        total: 0,
        page: {},
        height: this.$store.state.height,
        modal1: false,
        modal3: false,
        data1: [
          {
            id: 1,
            title: "机器组3",
          },
          {
            id: 2,
            title: "机器组4",
          },
        ],
        request: {
          device_number: "",
          page: 1,
        },
        columns1: [
        {
          title: "文章标题",
          key: "title",
          minWidth: 300,
          align: "center"
        },
        {
          title: "是否是第三方",
          key: "third_url",
          minWidth: 150,
          align: "center"
        },

        {
          title: "阅读量",
          key: "read_num",
          minWidth: 150,
          align: "center"
        },
        {
          title: "文章排序",
          key: "is_push",
          minWidth: 150,
          align: "center"
        },
        {
          title: "是否置顶",
          key: "is_top",
          minWidth: 150,
          align: "center"
        },
        {
          title: "文章状态",
          key: "status",
          minWidth: 150,
          align: "center"
        },
        {
          title: "文章类型",
          key: "name",
          minWidth: 150,
          align: "center"
        },
        {
          title: "文章创建时间",
          key: "create_time",
          minWidth: 160,
          align: "center"
        },
        {
          title: "文章更新时间",
          key: "update_time",
          minWidth: 160,
          align: "center"
        },
        {
          title: "操作",
          slot: "option",
          minWidth: 200,
          align: "center",
          fixed: 'right'
        }
        ],
        tableData: [],
        role_id: null,
      };
    },
    // 获取文章列表
    created() {
      this.getArticlelist();
    },
    methods: {
      add3(){
        this.cancel();
        this.modal3 = true
        this.allocated = [];
        this.undistributed = [];
        if(this.infoID == 6){
          console.log('6')
          this.axios.post("device/getAllDev").then(res => {
            if (res.code == 1) {
              this.allocated = res.data.allocated;
              this.undistributed= res.data.undistributed;
            }
          });

        }
      },
      search() {
        this.params.page = 1;
        this.init();
      },
      confirm() {
        this.modal1 = false;
        this.$Message.success("保存成功！");
        this.cancel();
      },
      cancel() {},
      add() {
        this.modal1 = true;
      },
      setStatus(id, status) {
        var text = "确定要" + (status == 1 ? "启用" : "禁用") + "此机器组么？";
        this.$Modal.confirm({
          title: text,
          onOk: () => {
            this.$Message.success("操作成功");
          },
          onCancel: () => {},
        });
      },
      //获取文章列表
      getArticlelist() {
        this.loading = true;
        this.axios.post("http://du.ys-n.com/admin/article/articleList",this.request).then(res => {
          if (res.code == 1) {
            this.loading = false;
            this.tableData = res.data.list;
            this.page.count = res.data.count; // 总条数
            this.page.curPage = res.data.curPage; // 当前页
            this.page.countPage = res.data.countPage; // 总页数
          }
        });
      },




      timechange(val) {
        console.log(val);
      },
      handleSizeChange(val) {
        this.request.page = 1;
        this.request.limit = val;
        this.lists();
      },
      handleCurrentChange(val) {
        this.params.page = val;
        this.init();
      },
    },
  };
</script>

<style>
  *{
    margin: 0;
    padding: 0;
  }
  .door_device{
    position: relative;
    top: -20px;
  }
  .vertical{
    font-size: 16px;

  }
</style>
